<template>
  <!-- 页面标题 -->
  <view class="page-header">
    <text class="title">今日天气预报</text>
  </view>

  <!-- 天气信息展示区域 -->
  <view class="weather-container" v-if="weatherData">
    <!-- 城市信息 -->
    <view class="city-info">
      <text class="city-name">{{ weatherData.city }}</text>
      <text class="update-time">更新时间：{{ weatherData.updateTime }}</text>
    </view>

    <!-- 今日天气概览 -->
    <view class="today-overview">
      <text class="temp">{{ todayWeather.temp }}℃</text>
      <text class="weather-type">{{ todayWeather.type }}</text>
    </view>

    <!-- 详细数据 -->
    <view class="detail-list">
      <view class="detail-item">
        <text class="label">湿度</text>
        <text class="value">{{ weatherData.shidu }}</text>
      </view>
      <view class="detail-item">
        <text class="label">PM2.5</text>
        <text class="value">{{ weatherData.pm25 }}</text>
      </view>
      <view class="detail-item">
        <text class="label">风力</text>
        <text class="value">{{ todayWeather.fengli }}</text>
      </view>
      <view class="detail-item">
        <text class="label">风向</text>
        <text class="value">{{ todayWeather.fengxiang }}</text>
      </view>
    </view>
  </view>

  <!-- 加载/失败提示 -->
  <view class="tip" v-else>
    <text>{{ tipText }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weatherData: null, // 存储完整天气数据
      todayWeather: {}, // 今日天气详情
      tipText: "正在加载天气数据..."
    };
  },
  onLoad() {
    this.getWeather();
  },
  methods: {
    getWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        success: (res) => {
          // 解析接口返回的JSON数据
          const result = res.data;
          if (result.status === 200) {
            this.weatherData = {
              city: result.cityInfo.city,
              shidu: result.data.shidu,
              pm25: result.data.pm25,
              updateTime: result.time.split(' ')[1] // 提取时间部分
            };
            // 今日天气预报（forecast数组第一个元素）
            this.todayWeather = {
              temp: result.data.forecast[0].high.split(' ')[1].replace('℃', ''),
              type: result.data.forecast[0].type,
              fengli: result.data.forecast[0].fengli,
              fengxiang: result.data.forecast[0].fengxiang
            };
          } else {
            this.tipText = "获取天气数据失败";
          }
        },
        fail: (eMsg) => {
          this.tipText = "请求失败，请检查网络";
          console.log("request fail----" + eMsg);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面标题样式 */
.page-header {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

/* 天气容器样式 */
.weather-container {
  padding: 20px;
}

/* 城市信息样式 */
.city-info {
  margin-bottom: 20px;
}
.city-name {
  font-size: 22px;
  font-weight: bold;
}
.update-time {
  font-size: 14px;
  color: #666;
  margin-left: 10px;
}

/* 今日概览样式 */
.today-overview {
  text-align: center;
  margin-bottom: 30px;
}
.temp {
  font-size: 40px;
  font-weight: bold;
}
.weather-type {
  font-size: 18px;
  color: #333;
  margin-left: 10px;
}

/* 详细数据列表样式 */
.detail-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.detail-item {
  width: 48%;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: center;
}
.label {
  font-size: 14px;
  color: #666;
}
.value {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
  display: block;
}

/* 提示文本样式 */
.tip {
  text-align: center;
  padding: 50px 0;
  color: #666;
}
</style>